<template>
  <div class="home-container">
    <div class="content">
      <!-- 头部展示区 -->
      <el-card class="header-card">
        <div class="header-content">
          <div class="header-text">
            <h1>Welcome to my website</h1>
            <h3>非常齐全的技术网站</h3>
            <p>My great project tagline</p>
          </div>
          <el-avatar 
            :size="80" 
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            class="user-avatar"
          />
        </div>
      </el-card>
      
      <!-- 快速入口 -->
      <el-card class="section-card">
        <h2>快速开始</h2>
        <p>点击文章访问网站核心内容</p>
        <el-button type="primary" @click="$router.push('/detail/view')">浏览文章</el-button>
      </el-card>
      
      <!-- 开源项目 -->
      <el-card class="section-card">
        <h2>开源项目 (gitee)</h2>
        <p>简单实用的后台管理系统、前端展示系统、小程序及APP等</p>
        <el-button type="success" >查看项目</el-button>
        <a href="https://gitee.com" target="_blank" class="gitee-icon" style="margin-left: 10px">
          <svg viewBox="0 0 24 24" width="24" height="24">
            <path fill="currentColor" d="M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.016 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.593-.593h-4.15a.592.592 0 0 1-.592-.593v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296z"/>
          </svg>
        </a>
      </el-card>
      
      <!-- 技术博客 -->
      <el-card class="section-card">
        <h2>技术博客 (CSDN)</h2>
        <p>开发经验总结与学习记录，包含教程、问题解决方案等</p>
        <el-button type="info">访问博客</el-button>
        <a href="https://blog.csdn.net" target="_blank" class="csdn-icon" style="margin-left: 10px">
          <svg viewBox="0 0 24 24" width="24" height="24">
            <path fill="currentColor" d="M19.04 4.318a2.477 2.477 0 0 1 1.742 4.215l-8.43 8.43a2.477 2.477 0 0 1-3.5-3.5l6.84-6.84a1 1 0 0 0-1.414-1.414l-6.84 6.84a4.477 4.477 0 0 0 6.328 6.328l8.43-8.43a4.477 4.477 0 0 0-3.14-7.647l-3.13.01a1 1 0 1 0 .01 2l3.14-.01zM4.318 19.04a2.477 2.477 0 0 1 0-3.5l6.84-6.84a2.477 2.477 0 0 1 3.5 3.5l-6.84 6.84a2.477 2.477 0 0 1-3.5 0zm1.414 1.414a4.477 4.477 0 0 0 6.328 0l8.43-8.43a4.477 4.477 0 0 0-6.328-6.328l-6.84 6.84a1 1 0 1 0 1.414 1.414l6.84-6.84a2.477 2.477 0 0 1 3.5 3.5l-8.43 8.43a4.477 4.477 0 0 1-6.328 0z"/>
          </svg>
        </a>
      </el-card>
      
      <!-- 推荐内容 -->
      <el-card class="section-card">
        <h2>我强烈推荐</h2>
        <p>选择您感兴趣的内容</p>
        <el-button type="warning" @click="handleShowRecommend">查看推荐</el-button>
      </el-card>
      
      <!-- 推荐弹窗 -->
<el-dialog v-model="showRecommendDialog" title="我的点赞" width="60%">
  <el-table :data="likedArticles" border style="width: 100%">
    <el-table-column prop="id" label="ID" width="80" />
    <el-table-column prop="title" label="标题" />
    <el-table-column prop="likedAt" label="点赞时间" width="180" />
  </el-table>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="showRecommendDialog = false">关闭</el-button>
    </span>
  </template>
</el-dialog>

<!-- 面试资源 -->
      <el-card class="section-card">
        <h2>代码资源(code)</h2>
        <p>程序员题库</p>
        <el-button type="danger" @click="$router.push('/detail/solution')">查看</el-button>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getRecommendedArticlesService } from '@/api/article';
import { ElMessage } from 'element-plus';

const activeIndex = ref('1');
const isDarkMode = ref(false);
const showArticleDialog = ref(false);
const showRecommendDialog = ref(false);
const likedArticles = ref([]);
const loading = ref(false);
const error = ref(null);
const articleForm = ref({
  title: '',
  content: ''
});

// 获取推荐文章
const fetchLikedArticles = async () => {
  try {
    loading.value = true;
    error.value = null;
    const res = await getRecommendedArticlesService();
    likedArticles.value = res.data;
  } catch (err) {
    error.value = err.message || '获取推荐文章失败';
    ElMessage.error(error.value);
  } finally {
    loading.value = false;
  }
};

const toggleDarkMode = () => {
  document.body.classList.toggle('dark-mode', isDarkMode.value);
};

const handleLogout = () => {
  // 退出登录逻辑
  console.log('用户退出');
};

const handleShowRecommend = () => {
  showRecommendDialog.value = true;
  fetchLikedArticles();
};

const handleSaveArticle = () => {
  console.log('保存文章:', articleForm.value);
  showArticleDialog.value = false;
  ElMessage.success('文章保存成功');
};
</script>

<style lang="scss" scoped>
.home-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
  transition: background-color 0.3s;
  position: relative;
  overflow: hidden;
  
  &::before, &::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.02);
    z-index: 0;
  }
  
  &::before {
    top: -50px;
    left: -50px;
    animation: float 12s ease-in-out infinite;
  }
  
  &::after {
    bottom: -50px;
    right: -50px;
    animation: float 15s ease-in-out infinite reverse;
  }
  
  @keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(5px, 5px) rotate(2deg); }
    50% { transform: translate(10px, -5px) rotate(-2deg); }
    75% { transform: translate(-5px, 10px) rotate(2deg); }
  }

  .nav-menu {
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto 20px;

    .el-menu-item {
      transition: all 0.3s ease;
      transform-origin: center;
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }
      &.is-active {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
      }
    }

    .nav-left {
      display: flex;
      align-items: center;
      padding: 0 10px;
      .logo {
        font-weight: bold;
        font-size: 1.2rem;
      }
    }
    
    .nav-center {
      display: flex;
      align-items: center;
    }
    
    .nav-right {
      display: flex;
      align-items: center;
      gap: 15px;
      .github-icon {
        display: flex;
        align-items: center;
        color: inherit;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .content {
    padding: 20px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    
    .header-card {
      grid-column: 1 / -1;
      padding: 30px;
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
      
      .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 900px;
        margin: 0 auto;
      }
      
      .header-text {
        text-align: left;
      }
      
      h1 {
        font-size: 2.5rem;
        margin-bottom: 10px;
      }
      
      h3 {
        font-size: 1.5rem;
        margin-bottom: 10px;
        color: #666;
      }
      
      p {
        font-size: 1.2rem;
        color: #888;
      }
      
      .user-avatar {
        transition: transform 0.3s ease;
        cursor: pointer;
        
        &:hover {
          transform: scale(1.1);
          box-shadow: 0 0 15px rgba(64, 158, 255, 0.5);
        }
      }
    }
    
    .section-card {
      transition: all 0.3s ease;
      cursor: pointer;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }
      
      h2 {
        font-size: 1.5rem;
        margin-bottom: 10px;
      }
      
      p {
        margin-bottom: 20px;
        color: #666;
      }
    }
  }
}

.dark-mode {
  background-color: #1a1a1a;
  color: #f0f0f0;

  .home-container {
    background-color: #121212;
    
    &::before, &::after {
      background: rgba(255, 255, 255, 0.03);
    }

    .content {
      background-color: #1e1e1e;
      color: #f0f0f0;
    }
  }
}
</style>